<template>
    <el-config-provider :locale="messages[application.language]" :size="application.size">
        <router-view/>
    </el-config-provider>
</template>

<script lang="ts" setup>
import {watch} from 'vue'
import i18n, {messages} from '@/locales'
import store from '@/store'
import {setTheme, setThemeColor, setFontFamily, setGray, cancelGray, setCssValue, setColorWeakness, cancelColorWeakness} from "@/utils";

const {application} = store.globalStore;

// 侦听主题
watch(() => application.dark, val => setTheme(val? 'dark':''), {immediate: true})

// 侦听组件大小
watch(() => application.size, val => setCssValue('--component-size', 'var(--el-component-size-' + val +')'), {immediate: true})

// 侦听主题色
watch(() => application.color, val => setThemeColor(val? val:application.color = '#409eff'), {immediate: true})

// 侦听语言
watch(()=> application.language, val => i18n.global.locale.value = val, {immediate: true})

// 侦听字体系列
watch(() => application.fontFamily, family => setFontFamily(family), {immediate: true})

// 侦听灰色模式
watch(() => application.grayPattern, val => val ? setGray() : cancelGray(), {immediate: true})

// 侦听色弱模式
watch(() => application.colorWeaknessPattern, val => val ? setColorWeakness() : cancelColorWeakness(), {immediate: true})

</script>
